<template>
  <div id="souS">
    <infoIn :trs="true">
      <template #Center>
        <input type="text" v-model="keyword" placeholder="请输入搜索关键字" />
      </template>
      <template #right>
        <span v-if="osos" @click="souA">搜索</span>
        <span v-else>取消</span>
      </template>
    </infoIn>
    <div class="souS-s" v-show="!osos"> 
      <h2>搜索历史</h2>
      <img src="@/assets/email/lajixiang.png" />
    </div>
    <div v-show="ososd">
        <h2>搜索结果</h2>
        <van-empty description="暂无数据" style="background:white" />
    </div>
    <div>
      <div class="main" v-for="(item, index) in opt" :key="index">
        <p class="pop">{{ item.title }}</p>
        <img :src="item.cover_img" alt="" />
        <p class="pop1">
          <img src="@/assets/email/shijian.png" />{{
            item.end_play_date | timer
          }}|共{{ item.sales_num }}课时
        </p>
        <p class="pop2">
          <span>{{ item.brows_num }}已报名</span>
          <span>{{ item.price ? item.price : "免费" }}</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { getCourseBasis } from "./tese";
import infoIn from "@/views/infoin.vue";
export default {
  components: {
    infoIn,
  },
  data() {
    return {
      osos: false,
      ososd:false,
      limit: 5,
      page: 1,
      course_type: 0,
      keyword: "",
      opt:[]
    };
  },
  watch: {
    keyword: {
      handler(val) {
        console.log(val);
        if (val != "") {
          this.osos = true;
          // this.ososd = true;
        } else {
          this.osos = false;
          // this.ososd = false;
        }
      },
    },
    deep: true,
  },
  methods: {
    async souA() {
      let res = await getCourseBasis({
        limit: 500,
        page: 1,
        course_type: 0,
        keywords: this.keyword,
      });
      console.log(res);
      if(res.data.data.list.length==0){
        this.ososd=true
      }else{
        this.ososd=false
        this.opt=res.data.data.list
        console.log(this.opt);
      }
      localStorage.getItem('list',)

    },
  },
};
</script>
<style lang="scss" scoped>
#souS {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
  .souS-s {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
    img {
      width: 25px;
      height: 25px;
    }
  }
}
input {
  font-size: 14px;
  width: 200px;
  height: 40px;
  background: url("@/assets/email/sousuo.png") no-repeat;
  background-position: 10px 10px;
  background-size: 15px;
  padding-left: 30px;
}
</style>